﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/vue.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/element-index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/element-index.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/orderManage/OrderSelect.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/axios.js"))
}
<div class="container-div" id="orderSelect-vue" style="margin-bottom:100px">
    <div class="top-select">
        <div>
            <el-input placeholder="请输入对应内容" clearable v-model="selectP1">
                <el-select style="width:130px" clearable slot="prepend" v-model="selectParam" placeholder="请选择条件">
                    <el-option v-for="item in selectArr" :label="item.label" :value="item.value" :key="item.label"></el-option>
                </el-select>
            </el-input>
        </div>
        <div>
            <el-date-picker v-model="timeValue"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
        </div>
        <div>
            <el-button type="primary" icon="el-icon-search" round v-on:click="Search">搜索</el-button>
        </div>
    </div>
    <div class="table-p">
        <el-table :data="tableData"
                  style="width: 100%"
                  border
                  v-on:row-dblclick="rowDbClick">
            <el-table-column type="index"
                             label="序号">
            </el-table-column>
            <el-table-column prop="OrderCode"
                             label="订单号">
            </el-table-column>
            <el-table-column prop="MaterialId"
                             label="物料编号">
            </el-table-column>
            <el-table-column prop="MaterialName"
                             label="物料名称">
            </el-table-column>
            <el-table-column prop="MaterialQuantity"
                             label="计划数量">
            </el-table-column>
            <el-table-column prop="PlaneQuantity"
                             label="完成数量">
            </el-table-column>
            <el-table-column prop="BatchQuantity"
                             label="未完成数量">
            </el-table-column>
            <el-table-column prop="Priority"
                             label="优先级"
                             :filters="[{text:'低',value:0},{text:'普通',value:1},{text:'紧急',value:2},{text:'加急',value:3}]"
                             :filter-method="filterPriority">
                <template slot-scope="scope">
                    <el-tag :type="priorityFormatter(scope.row.Priority)">
                        {{scope.row.Priority | priorityFilter}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="Status"
                             label="状态"
                             :filters="[{text:'创建',value:0},{text:'开始',value:1},{text:'暂停',value:2},{text:'终止',value:3},{text:'完成',value:4}]"
                             :filter-method="filterStatus">
                <template slot-scope="scope">
                    <el-tag :type="StatusFilter(scope.row.Status)">
                        {{scope.row.Status | filterStatusTitle}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="详情" fixed="right">
                <template slot-scope="scope">
                    <a v-on:click="showDetails(scope.row)">查看</a>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div style="margin:50px 30px;margin-top:20px;">
        <el-pagination background
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total" v-on:size-change="handleSizeChange" v-on:current-change="handleCurrentChange"
                       :current-page="pageSize" :page-sizes="[5,10,20]" :page-size="limit">
        </el-pagination>
    </div>

    <div>
        <el-drawer :title="drawerTitle1"
                   :visible.sync="drawer1"
                     size="50%">
            <div style="margin:5px;">
                <el-table :data="detailData" border>
                    <el-table-column type="index" label="序号"></el-table-column>
                    <el-table-column label="日期" prop="date"></el-table-column>
                    <el-table-column label="状态" prop="status"></el-table-column>
                    <el-table-column label="操作者" prop="operator"></el-table-column>
                </el-table>
            </div>
        </el-drawer>
        <el-dialog title="详情" :visible.sync="showdialog" :fullscreen="showfullscreen">
            <el-table :data="detailData" border>
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column label="日期" prop="date"></el-table-column>
                <el-table-column label="状态" prop="status"></el-table-column>
                <el-table-column label="操作者" prop="operator"></el-table-column>
            </el-table>
            <div slot="footer">
                <el-button icon="el-icon-full-screen" circle v-on:click="showFullscreen"></el-button>
            </div>            
        </el-dialog>
    </div>
</div>
<script>
    let app = new Vue({
        el: '#orderSelect-vue',
        data: {
            pageSize: 1,  // 当前页码
            limit: 5,  //每页数据条数
            tableData: [],
            total: 0,
            selectParam: '',
            selectP1: '',
            selectArr: [
                {
                    label: '订单编号',
                    value: 'OrderCode'
                },
                {
                    label: '物料编号',
                    value: 'MaterialId'
                },
                {
                    label: '物料名称',
                    value: 'MaterialName'
                },
                {
                    label: '计划投产',
                    value: 'MaterialQuantity'
                },
                {
                    label: '计划生产',
                    value: 'PlaneQuantity'
                },
                {
                    label: '批次数量',
                    value: 'BatchQuantity'
                }
            ],
            timeValue: [],
            drawer1: false,
            drawerTitle1: '',
            detailData: [
            ],
            showdialog: false,
            showfullscreen: false,
            iframeTag: 100,   // iframe名称标记，从100开始递减
            detail_OrderCode: ''
        },
        methods: {
            StatusFilter(tag) {
                let result = 'warning';
                switch (tag) {
                    case 0: {
                        result = 'info';
                        break;
                    }
                    case 1: {
                        result = 'success';
                        break;
                    }
                    case 2: {
                        result = '';
                        break;
                    }
                    case 3: {
                        result = 'danger';
                        break;
                    }
                    case 4: {
                        result = 'warning'
                        break;
                    }
                }
                return result;
            },
            priorityFormatter(Priority) {
                let result = "info"
                switch (Priority) {
                    case 0: {
                        result = "info"
                        break;
                    }
                    case 1: {
                        result = "success"
                        break;
                    }
                    case 2: {
                        result = ""
                        break;
                    }
                    case 3: {
                        result = "danger"
                        break;
                    }
                }
                return result;
            },
            filterPriority(value, row) {
                return row.Priority == value
            },
            filterStatus(value, row) {
                return row.Status == value;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = 1;
                this.limit = val;
                this.selectOrder();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageSize = val;
                this.selectOrder();
            },
            selectOrder() {
                let stime = new Date(this.timeValue[0]);
                let etime = new Date(this.timeValue[1]);
                let url = '@Url.Content("~/OrderManage/OrderPreview/SelectOrderByParams")'
                axios.get(url, {
                    params: {
                        pageSize: this.pageSize,
                        limit: this.limit,
                        stime: stime,
                        etime: etime,
                        OrderCode: "",
                        MaterialId: "",
                        MaterialName: ""
                    }
                }).then(res => {
                    let result = res.data;
                    this.total = result.total;
                    this.tableData = []
                    for (order of result.data) {
                        let obj = {
                            OrderCode: order.OrderCode,
                            MaterialId: order.MaterialId,
                            MaterialName: order.MaterialName,
                            MaterialQuantity: order.MaterialQuantity,
                            PlaneQuantity: order.PlaneQuantity,
                            BatchQuantity: order.BatchQuantity,
                            Priority: order.Priority,
                            Status: order.OrderCurrentStatus
                        }
                        this.tableData.push(obj)
                    }
                }).catch(err => {
                    this.$message({
                        showClose: false,
                        message: '请求订单错误：' + err,
                        type: 'error'
                    });
                })
            },
            showDialog(row) {
                this.showdialog = true;
            },
            showFullscreen() {
                this.showfullscreen = !this.showfullscreen;
            },
            // 搜索
            Search() {
                this.selectOrder();
            },
            // 双击订单，获取该订单的生命周期
            rowDbClick(row, column, event) {
                let url = '@Url.Content("~/OrderManage/OrderPreview/GetOrderLifecycle")'
                axios.get(url, {
                    params: {
                        orderCode: row.OrderCode
                    }
                }).then(res => {
                    let result = res.data;
                    this.drawerTitle1 = '订单编码：<br/>' + row.OrderCode;
                    this.detailData = []
                    for (order of result.data) {
                        let obj = {
                            date: order.CreateTime,
                            status: order.OrderStatus,
                            operator: order.CreateSource,
                        }
                        this.detailData.push(obj)
                    }
                    this.drawer1 = true;
                }).catch(err => {
                    this.$message({
                        showClose: false,
                        message: '请求订单错误：' + err,
                        type: 'error'
                    });
                })
            },
            showDetails(row) {
                if (window.parent.document.getElementById("orderDetail-close") != null) {
                    window.parent.document.getElementById("orderDetail-close").click()
                }
                let url = '/OrderManage/OrderPreview/OrderDetails'
                this.detail_OrderCode = row.OrderCode
                this.AddIframePage(url, '订单详情')
            },
            // 封装JS添加框架页面方法
            AddIframePage(url, navName) {
                // 获取iframe的父类
                let iframeParent = window.parent.document.getElementById("content-main")
                // 获取导航a标签的父类
                let nav_a_parent = window.parent.document.querySelector('.page-tabs-content');

                // 设置其它nav_a class
                let nav_a_parent_childrens = nav_a_parent.childNodes;
                let _orderCode = this.detail_OrderCode
                for (let i = 0; i < nav_a_parent_childrens.length; i++) {
                    if (nav_a_parent_childrens[i].className == 'menuTab active' || nav_a_parent_childrens[i].className == 'active menuTab'){                        
                        nav_a_parent_childrens[i].setAttribute('id', 'orderSelect')
                        nav_a_parent_childrens[i].setAttribute('orderCode', _orderCode)
                    }
                }
                let new_nav_a = `<a href="javascript:;" id="orderDetail" class="menuTab"
                                data-id="${url}">${navName}
                                <i class="fa fa-times-circle" id="orderDetail-close"></i></a>`
                nav_a_parent.innerHTML += new_nav_a

                this.iframeTag++;
                let new_iframe = `<iframe class="SHRIS_iframe" name="iframe${this.iframeTag}" 
                                    width="100%" height="100%" src="${url}" 
                                    frameborder="0" data-id="${url}" seamless=""
                                    style="dispaly:none;"></iframe>`
                iframeParent.innerHTML += new_iframe                                
            }
        },
        filters: {
            filterStatusTitle(Status) {
                let result = "未知";
                switch (Status) {
                    case 0: {
                        result = "创建"
                        break;
                    }
                    case 1: {
                        result = "开始"
                        break;
                    }
                    case 2: {
                        result = "暂停"
                        break;
                    }
                    case 3: {
                        result = "终止"
                        break;
                    }
                    case 4: {
                        result = "完成"
                        break;
                    }
                }
                return result
            },
            priorityFilter(Priority) {
                let result = "低"
                switch (Priority) {
                    case 0: {
                        result = "低"
                        break;
                    }
                    case 1: {
                        result = "普通"
                        break;
                    }
                    case 2: {
                        result = "紧急"
                        break;
                    }
                    case 3: {
                        result = "加急"
                        break;
                    }
                }
                return result;
            }
        },
        mounted() {
            if (window.parent.document.getElementById("orderDetail") != null) {
                window.parent.document.getElementById("orderDetail").click()
            }
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            this.timeValue.push(start)
            this.timeValue.push(end)
            this.selectOrder();
        },
        deactivated() {
            console.log('听筒')
        },
        beforeDestroy() {
            console.log('销毁前')
        },
        destroyed() {
            console.log('销毁')
            console.log(window.parent.document.getElementById("orderDetail-close"))
            if (window.parent.document.getElementById("orderDetail-close") != null) {
                console.log("应该一起关闭")
            }
        }
    })
</script>

